<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?4lw2w3');
  src:  url('fonts/icomoon.eot?4lw2w3#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?4lw2w3') format('truetype'),
    url('fonts/icomoon.woff?4lw2w3') format('woff'),
    url('fonts/icomoon.svg?4lw2w3#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
    span {
        font-family: 'icomoon';
        font-size: 50px;
        color: deeppink;
    }
    </style>
</head>
<body>
    <span></span>
    <span></span>
    <span></span>
</body>
</html>
<!-- 
    字体图标的优点：
    1.轻量级：一个图标字体要比一系列的图像都要小，一旦字体加载了，图标就会马上渲染出来，减少了服务请求
    2.灵活性：本质其实就是文字，可以随意的改变颜色、产生阴影、透视效果、旋转等
    3.兼容性：几乎支持所有浏览器，可以放心使用
    注意：字体图标不能代替精灵技术，只是对工作中的图标部分技术的提升和优化。

    总结：
    1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。
    2.如果遇到一些结构和样式比较复杂一点的小图片，就用精灵图。

    字体图标的下载：
    1.icomoon字库  http://icomoon.io
    2.阿里iconfont字库  http://www.iconfont.cn
 -->